<template>
  <view>
    <u-navbar
      :is-back="false"
      back-icon-color="#f6f6f6"
      title="我的"
      title-color="#f6f6f6"
      :background="navBackground"
    ></u-navbar>
    <view class="content">
      <!--用户登录模态框-->
      <!--顶部面板-->
      <view class="login-top">
        <view
          v-if="isLogin"
          class="user-panel"
          style="padding: 30rpx 0"
          @tap="toPageUser()"
        >
          <view class="user-info">
            <view class="user-avatar">
              <u-avatar
                :src="avatar_url"
                width="135rpx"
                height="135rpx"
                :badge="auth_type"
              ></u-avatar>
            </view>
            <view class="user-box">
              <view class="user-details">
                <view class="user-name">{{ nickname }}</view>
                <view class="user-introduce"> 这个人很懒，什么也没有留下 </view>
              </view>
              <view class="navigate-btn" style="font-size: 26rpx">
                个人主页
              </view>
            </view>
          </view>
        </view>
        <view v-else class="default-top">
          <view class="tip-more">登录获取更多</view>
          <view class="way-cell">
            <view class="iconfont icon-weixin" @tap="login('wechat')"></view>
            <view class="iconfont icon-qq" @tap="login('qq')"></view>
          </view>
          <view class="bottom-border"></view>
        </view>
        <view class="achievement">
          <view @tap="toPageUser()">
            <view class="achieve-num">{{ user.dynamic_count }}</view>
            <view class="achieve-kind">点赞</view>
          </view>
          <view class="achieve-center" @tap="toPageUser()">
            <view class="achieve-num">{{ user.follow_count }}</view>
            <view class="achieve-kind achieve-kind-center">关注</view>
          </view>
          <view @tap="toPageUser()">
            <view class="achieve-num">{{ user.fans_count }}</view>
            <view class="achieve-kind">粉丝</view>
          </view>
        </view>
      </view>
      <u-grid :unlined="true">
        <block v-for="(item, index) in mainList" :key="index">
          <u-grid-item
            :cell="4"
            @click="navToPage(item.url, item.isOpen, item.needLogin)"
            :border="false"
            :bottomLine="false"
          >
            <view class="grid-item">
              <view :class="'iconfont icon-' + item.icon"></view>
              <view class="tui-grid-label">{{ item.name }}</view>
            </view>
          </u-grid-item>
        </block>
      </u-grid>
      <!--更多服务-->
      <u-cell-group>
        <u-cell-item
          icon="info-circle"
          @click="navToPage('/pages/secondary/about', true)"
          title="关于我们"
        >
        </u-cell-item>
        <u-cell-item
          icon="order"
          title="用户条款"
          @click="navToPage('/pages/secondary/clause', true)"
        ></u-cell-item>
        <u-cell-item icon="server-man"
          ><button open-type="contact" class="contact-btn">联系客服</button>
        </u-cell-item>
        <block v-if="isLogin">
          <u-cell-item
            icon="setting"
            @click="logOut"
            title="退出登录"
          ></u-cell-item>
        </block>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
let app = getApp();
export default {
  data() {
    return {
      navBackground: app.globalData.navBackground,
      isLogin:
        typeof app.globalData.isLogin === undefined
          ? false
          : app.globalData.isLogin,
      avatar_url: '',
      nickname: '',
      user: {
        dynamic_count: 0,
        follow_count: 0,
        fans_count: 0,
      },
      mainList: [
        {
          icon: 'support',
          name: '我赞过的',
          url: '/pages/cloth/sort?type=like',
          isOpen: true,
          needLogin: true,
        },
        {
          icon: 'history',
          name: '浏览历史',
          url: '/pages/cloth/sort?type=history',
          isOpen: true,
          needLogin: true,
        },
        {
          icon: 'mine-save',
          name: '我的收藏',
          isOpen: true,
          needLogin: true,
          url: '/pages/cloth/sort?type=save', //开发中
        },
      ],
    };
  },
  onLoad() {},
  onShow: function () {
    this.isLogin = app.globalData.isLogin;
    this.avatar_url = app.globalData.avatarUrl;
    this.nickname = app.globalData.nickname;
  },
  methods: {
    logOut() {
      uni.clearStorage({
        key: 'globalData',
        success: (res) => {
          app.showToast('成功退出登录~', 'success');
          this.isLogin = false;
        },
        fail: (err) => {
          app.showToast('服务器错误，请稍后再试~');
          console.log('输出错误信息：', err.errMsg);
        },
      });
    },
    toPageUser() {
      app.showToast('个人主页开发中，请稍后再试~');
    },
    navToPage(url, isOpen, needLogin) {
      if (!isOpen) {
        app.showToast('此功能开发中，请稍后再试~');
        return;
      }
      if (needLogin && !this.isLogin) {
        app.showToast('您还没有登陆哦~');
        return;
      }
      uni.navigateTo({
        url: url,
      });
    },
    login() {
      uni.navigateTo({
        url: '/pages/user/login',
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f6f6f6;
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200rpx;
  padding: 0px 50rpx;
}

.user-avatar {
  width: 135rpx;
  height: 135rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px #fff solid;
}

.info-left-part {
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-box {
  margin-left: 15px;
}

.login-tips {
  margin-left: 15px;
  color: #a59e9e;
  font-size: 12px;
}

.user-name {
  font-size: 28rpx;
}

.user-introduce {
  color: #808080;
  font-size: 28rpx;
}

.login-top {
  padding: 20rpx 40rpx;
  background-color: #ffffff;
}

.user-panel {
  display: flex;
  width: 100%;
  justify-content: space-between;
  border-radius: 10rpx;
}

.user-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-avatar {
  width: 135rpx;
  height: 135rpx;
}

.user-box {
  width: calc(100% - 120rpx);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
}

.user-introduce {
  font-size: 26rpx;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 20rpx;
  color: var(--theme-dark-font-sub);
}

.user-details {
  width: 70%;
  padding-left: 20rpx;
}

.achievement {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
}

.achievement {
  margin: 0px auto;
  margin-top: 35rpx;
  padding: 0px 60rpx;
  padding-bottom: 12rpx;
  font-size: 32rpx;
}

.achieve-num {
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 36rpx;
}

.achieve-kind {
  padding-top: 6rpx;
  font-size: 28rpx;
  color: #6c6c6c;
}

.achieve-kind-center {
  border-left: 1px #d4d2d2 solid;
  border-right: 1px #d4d2d2 solid;
}

.achieve-center {
  width: 36%;
  text-align: center;
}

.navigate-btn::after {
  font-family: 'iconfont';
  content: '\e688';
  color: #8a8888;
}

.grid-item {
  width: 100%;
}

.grid-item .iconfont {
  justify-content: center;
  font-size: 56rpx;
  text-align: center;
}

.tui-grid-label {
  width: 100%;
  margin-top: 20rpx;
  text-align: center;
  color: #6c6c6c;
}

.tui-item-box {
  display: flex;
  align-items: center;
}

.tui-item-box .iconfont {
  font-size: 56rpx;
  margin-right: 20rpx;
}

.tip-more {
  font-weight: bold;
}

.bottom-border {
  width: calc(100% - 60rpx);
  margin: 0px auto;
  margin-top: 30rpx;
  border-bottom: 1rpx #e6dcdc solid;
}

.default-top {
  margin-top: 30rpx;
}

.default-top .iconfont::before {
  color: #ffffff;
}

.default-top .iconfont {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85rpx;
  height: 85rpx;
  border-radius: 50%;
  font-size: 48rpx;
}

.tip-more {
  text-align: center;
  font-size: 32rpx;
}

.way-cell {
  display: flex;
  justify-content: space-evenly;
  margin-top: 50rpx;
}

.icon-phone2 {
  background: linear-gradient(to right bottom, #73bbff, #1e93fd);
}

.icon-weixin {
  background: linear-gradient(to right bottom, #b9ec92, #64d629);
}

.icon-qq {
  background: linear-gradient(to right bottom, #abe1f9, #15abea);
}

.contact-btn {
  width: 100%;
  background-color: transparent;
  border: none;
  text-align: left;
  font-size: 28rpx;
  color: #606266;
  padding: 0px;
}

.contact-btn::after {
  display: none;
}
</style>
